<!-- 选择职位 -->
<script setup lang='ts'>
  import { reactive } from 'vue';

  const props = defineProps<{
    type: number
  }>()

  const data = reactive({
    checkedNum: 0,
    list: [],
    searchPosition: [],
    positions: []
  })

  const positionFilter = () => {
    console.log('positionFilter');
  }

  const positionFilterChange = () => {
    console.log('positionFilterChange');
  }
</script>

<template>
  <div>
    <p class="title">所选包含{{ data.checkedNum }}人</p>
      <el-form>
        <el-form-item label="职位搜索：">
          <el-select
            v-model="data.searchPosition"
            multiple
            filterable
            placeholder="输入需要检索的职位"
            :filter-method="positionFilter"
            @change="positionFilterChange"
          >
            <el-option
                v-for="item in data.positions"
                :key="item.positionId"
                :label="item.positionName"
                :value="item.positionName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-tree
        ref="tree"
        :data="data.list"
        :props="customProps"
        show-checkbox
        :load="loadNode"
        highlight-current
        lazy
        @check="setNum"
        :filter-node-method="filterNode"
      ></el-tree>
  </div>
</template>

<style scoped>
  .title {
    color: #3d88f2;
    margin-bottom: 10px;
  }
</style>